import React from 'react';
import { connect } from 'react-redux';

import Filter from './Filter.jsx';
import AreaGroup from './AreaGroup.jsx';
import StageGroup from './StageGroup.jsx';
import GradeGroup from './GradeGroup.jsx';
import SubjectGroup from './SubjectGroup.jsx';
import UserFeatureGroup from './UserFeatureGroup.jsx';
import VersionGroup from './VersionGroup.jsx';
import DeviceTypeGroup from './DeviceTypeGroup.jsx';

import Divider from 'material-ui/lib/divider';

import filterStyle from './Filter.less';

import { initConditionRequest, setCondition } from '../../../actions/fixup-work/conditionAction';

class TeacherFilter extends React.Component {

	static propTypes = {
		onSearch: React.PropTypes.func,
	};

	static defaultProps = {
		onSearch: function() {},
	};

	// 所有复选框项的集合
	checkItemsMap = new Map();

	constructor(props) {
		super(props);
	}

	componentDidMount() {
		let { dispatch } = this.props;

		let action = initConditionRequest('province');
		dispatch(action);

		action = initConditionRequest('grade');
		dispatch(action);

		action = initConditionRequest('stage', 'teacher');
		dispatch(action);

		action = initConditionRequest('subject', 'teacher');
		dispatch(action);

		action = initConditionRequest('deviceType');
		dispatch(action);

		action = initConditionRequest('version');
		dispatch(action);
	}

	// 处理省份筛选器变化
	handleProvinceChange = (value) => {
		let { dispatch } = this.props;

		let action = setCondition('province', (value));
		dispatch(action);

		action = initConditionRequest('city', value);
		dispatch(action);

		action = setCondition('city', '');
		dispatch(action);

		action = setCondition('county', '');
		dispatch(action);

		action = setCondition('school', '');
		dispatch(action);
	};

	// 处理城市筛选器变化
	handleCityChange = (value) => {
		let { dispatch } = this.props;

		let action = setCondition('city', (value));
		dispatch(action);

		action = initConditionRequest('county', value);
		dispatch(action);

		action = setCondition('county', '');
		dispatch(action);

		action = setCondition('school', '');
		dispatch(action);
	};

	// 处理区县筛选器变化
	handleCountyChange = (value) => {
		let { dispatch } = this.props;

		let action = setCondition('county', (value));
		dispatch(action);

		action = initConditionRequest('school', value);
		dispatch(action);

		action = setCondition('school', '');
		dispatch(action);
	};

	// 处理学校筛选器变化
	handleSchoolChange = (value) => {
		let { dispatch } = this.props;

		let action = setCondition('school', (value));
		dispatch(action);
	};

	// 处理版本筛选器变化
	handleVersionChange = (value) => {
		let { dispatch } = this.props;

		let action = setCondition('version', value);
		dispatch(action);
	};

	handleCheckItemChange = (key, value, isChecked) => {
		let { dispatch } = this.props;

		if (!this.checkItemsMap.has(key)) {
			this.checkItemsMap.set(key, new Set());
		}

		let itemSet = this.checkItemsMap.get(key);
		if (isChecked) {
			if (value === '-1') {
				// 如果选择'不限'则清除其他选项
				itemSet.clear();
			} else {
				// 如果选择'其他任意项', 则清除'不限'
				itemSet.delete('-1');
			};

			itemSet.add(value);
		} else {
			itemSet.delete(value);
			if (itemSet.size === 0) {
				itemSet.add('-1');
			};
		};

		this.checkItemsMap.set(key, itemSet);

		let action = setCondition(key, Array.from(itemSet));
		dispatch(action);
	};

	handleUserFeatureChange = (rangeValue) => {
		let { dispatch } = this.props;
		let action = setCondition('userFeature', rangeValue);
		dispatch(action);
	};

	render() {
		let { store, ...funcs } = this.props; 
		let { onSearch } = funcs;

		let { province, city, county, school, stage, grade, subject, version, deviceType } = store.dataOptions; 

		return (
			<Filter onSearch={onSearch}>
				{/* 地域选择 */}
				<AreaGroup 
					provinces={province} 
					selectedProvince={store.province}
					onProvinceChange={this.handleProvinceChange}
					cities={city} 
					selectedCity={store.city}
					onCityChange={this.handleCityChange}
					counties={county} 
					selectedCounty={store.county}
					onCountyChange={this.handleCountyChange}
					schools={school}
					selectedSchool={store.school}
					onSchoolChange={this.handleSchoolChange} />
				{/* 学段选择 */}
				<StageGroup
					stages={stage}
					checkedItems={store.stage}
					onItemCheck={this.handleCheckItemChange} />
				{/* 年级选择 */}
				<GradeGroup
					grades={grade}
					checkedItems={store.grade}
					onItemCheck={this.handleCheckItemChange} />
				{/* 学科选择 */}
				<SubjectGroup
					subjects={subject}
					checkedItems={store.subject}
					onItemCheck={this.handleCheckItemChange} />
				{/* 用户特征 */}
				<UserFeatureGroup 
					range={store.userFeature}
					onRangeChange={this.handleUserFeatureChange} />
				{/* 分割线 */}
				<Divider />
				{/* 版本选择 */}
				<VersionGroup
					versions={version}
					selectedVersion={store.version}
					onChange={this.handleVersionChange} />
				{/* 设备类型选择 */}
				<DeviceTypeGroup
					deviceTypes={deviceType}
					checkedItems={store.deviceType}
					onItemCheck={this.handleCheckItemChange} />
			</Filter>
		);
	}
}

export default connect((state) => ({ store: state.fixupWork.condition }))(TeacherFilter);